<template>
  <el-dialog title="工作日志" :visible.sync="visible" append-to-body>
    <div style="margin-bottom: 10px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="提交人" prop="createBy">
          <el-input
            v-model="queryParams.createBy"
            placeholder="请输入提交人名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="block">
      <el-timeline>
        <el-timeline-item
          :timestamp="item.createTime"
          placement="top"
          v-for="item in workList"
          :key="item.workId"
        >
          <el-card>
            <h4><label>{{ item.createBy }}</label> 提交的工作日志</h4>
            <p v-html="item.workLog" class="worklog"></p>
            <p style="float: right" >
              <span style="margin-right: 20px"
                ><label>客户名称：</label> {{ item.customerName }}</span
              >
              <span
                ><label>需求科室：</label>
                <dict-tag
                  v-if="item.needDept !== '8'"
                  :options="dict.type.crm_project_dept"
                  :value="item.needDept"
                  style="display: inline-block"
                />
                <span v-else>{{ item.otherDept }}</span>
              </span>
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        :page-sizes="[3, 5, 10, 20]"
      />
    </div>
  </el-dialog>
</template>

<script>
import { listWork } from "@/api/crm/work";
export default {
  name: "addWorklog",
  dicts: ["crm_project_dept"],
  data() {
    return {
      visible: false,
      form: {},
      customerList: [],
      workList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 3,
        needDept: null,
        otherDept: null,
        customerId: null,
        workLog: null,
      },
      loading: false,
      total: 0,
    };
  },
  methods: {
    resetQuery(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 3,
        needDept: null,
        otherDept: null,
        customerId: null,
        workLog: null,
      }
      this.getList()
    },
    handleQuery(){
      this.getList()
    },
    open(row) {
      this.workList = []
      this.visible = true;
      this.queryParams.projectId = row.projectId
      this.getList();
    },
    getList() {
      this.loading = true;
      listWork(this.queryParams).then((response) => {
        this.workList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>


<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

:v-deep .el-dialog__body {
    padding: 5px 20px 30px 20px;
}

.worklog {
  margin-left: 10px;
}
</style>